import { Component } from 'react';
import Taro, { getCurrentInstance } from '@tarojs/taro';
import { View, Image, Text,Input } from '@tarojs/components'
import { staticUrl } from '@/utils'
import {applyLeader,getLeaderStatus} from '@/api/distribution'
import './index.scss'
const distributionLoading = staticUrl('/img/distribution/distribution_loading.png')
const distributionFail = staticUrl('/img/distribution/distribution_fail.png')

interface State{
	status:any,
	reason:any,
	nickname:string,
	company:string,
	recommendName:string,
	recommendId:any,
}

class Adviser extends Component<any> {
    $instance = getCurrentInstance();
    constructor(props) {
      super(props)
      this.state = {
        status:'',
              reason:'由于您未使用真实姓名，建议您使用真实姓名再次申请！',
              nickname:'',
              company:'',
              recommendName:'',
              recommendId:''
      }
    }
    state: State
    componentDidMount() {
          this.setState({
              status: -1
          },()=>{
              this.getStatus()
          })

    }

    UNSAFE_componentWillReceiveProps() {
    }

    /**
	* 获取车险团长状态
	**/
    getStatus(){
		const { status, reason ,recommendId=''} = this.$instance.router.params
		this.setState({
			status,
			reason,
			recommendId
		})
	}

    /**
	* 重新申请
	**/
    reApply(){
		this.setState({
			status:-1
		})
	}

    /**
	* 提交
	**/
    submit(){
		const { mobile } = Taro.getStorageSync('IS_USERINFO')
		if(!this.state.nickname){
			Taro.showToast({
				title: `请输入姓名！`,
				icon: 'none'
			})
			return
		}
		Taro.showLoading({
			title: '加载中...',
			mask: true
    })
		applyLeader({
			nickname:this.state.nickname,
			mobile,
			company:this.state.company,
			recommendId:this.state.recommendId ? this.state.recommendId : 0,
			recommendName:this.state.recommendName ? this.state.recommendName : ''
		}).then(res=>{
			console.log(res)
			this.getLeaderStatus()
		}).finally(()=>{
			Taro.hideLoading()
		})
	}

    /**
	* 页面出事化函数，一进来页面，就直接调取申请接口，成功后直接跳到个人中心页
	**/
    handlePage(){
		Taro.showLoading({
			title: '申请中...',
			mask: true
    })
		const { mobile } = Taro.getStorageSync('IS_USERINFO')
		applyLeader({
			mobile,
			recommendId:this.state.recommendId ? this.state.recommendId : 0
		}).then(res=>{
			let path = '/distribution/user'
			Taro.navigateTo({
				url: `/pages/webview/index/index?path=${path}`
			})
			// 申请直接成功，跳转到个人中心页面
		}).finally(()=>{
			Taro.hideLoading()
		})
	}

    /**
 * 获取车险团长状态
* **/
    getLeaderStatus(){
		Taro.showLoading({
			title: '加载中...',
			mask: true
    })
		getLeaderStatus().then(res=>{
			let { data } = res.data
			console.log('data',data)
			if(data.status == 1){ // 直接跳到会员中心页面
				let path = '/distribution/user'
				Taro.navigateTo({
					url: `/pages/webview/index/index?path=${path}`
				})
			}else{
				this.setState({
					status:data.status,
					reason:data.reason
				})
			}
		}).finally(()=>{
			Taro.hideLoading()
		})
	}


    handleInputChange(type,e){
		this.setState({
			[type]:e.detail.value
		})
	}



    render () {
      const { status,reason } = this.state
      return (
        <View className='apply'>
                  {/* 审核状态 ：未申请 */}
                  {
                      status == -1 ?
                      (
                      <View className="apply-form">
                          <View className="form">
                              <View className="form-title">为了方便与您沟通，请您填写</View>
                              <View className="form-item">
                                  <Text className="form-key"><Text className="dot">*</Text>姓名</Text>
                                  <Input className="form-val"
                                      placeholder="请输入"
                                      maxLength={12}
                                      name="nickname"
                                      value={this.state.nickname}
                                      onInput={(e)=>this.handleInputChange('nickname',e)}
                              ></Input>
                              </View>
                              <View className="form-item">
                                  <Text className="form-key">工作单位</Text>
                                  <Input
                                      className="form-val"
                                      placeholder="请输入"
                                      name="company"
                                      value={this.state.company}
                                      onInput={(e)=>this.handleInputChange('company',e)}>
                                  </Input>
                              </View>

                              <View className="form-item">
                                  <Text className="form-key">推荐人姓名</Text>
                                  <Input
                                      className="form-val"
                                      placeholder="请输入"
                                      name="recommendName"
                                      value={this.state.recommendName}
                                      onInput={(e)=>this.handleInputChange('recommendName',e)}>
                                  </Input>
                              </View>

                              <View className="form-item">
                                  <Text className="form-key">推荐人编码</Text>
                                  <Input
                                      className="form-val"
                                      placeholder="请输入"
                                      name="recommendId"
                                      disabled={this.state.recommendId != 0 ? false : true}
                                      value={this.state.recommendId}
                                      onInput={(e)=>this.handleInputChange('recommendId',e)}>
                                  </Input>
                              </View>

                              <View className="apply-submit" onClick={()=>this.submit()}>提交</View>
                          </View>
                      </View>
                      ) : null
                  }

                  {/* 审核状态：待审核、未通过 */}
                  {
                      [0,2].includes(+status) ? (
                          <View className="status">
                          <View className="status-box">
                              {
                                  status == 0 ? (
                                      <Image src={distributionLoading} className="status-img"></Image>
                                  ):null
                              }
                              {
                                  status == 2 ? (
                                      <Image src={distributionFail} className="status-img"></Image>
                                  ):null
                              }
                              {
                                  status == 0 ? (
                                      <View className="status-txt">
                                          您已提交申请，正在审核中
                                      </View>
                                  ):(
                                      <View className="nopass-box">
                                          <View className="status-tips">
                                          {reason}
                                          </View>
                                          <View className="re-apply" onClick={()=>this.reApply()}>重新申请</View>
                                      </View>
                                  )
                              }
                          </View>
                      </View>
                      ) : null
                  }
        </View>
      )
    }
}
export default Adviser
